<template>
  <div>
    <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse">
      <div :class="logoStyle">
        <img :class="logoImg" src="../assets/logo.png" />
      </div>
      <el-menu-item index="1" class="menuItem">
        <i class="el-icon-discount"></i>
        <span slot="title"><router-link to="/">首页</router-link></span>
      </el-menu-item>
      <el-menu-item index="2" class="menuItem">
        <i class="el-icon-present"></i>
        <span slot="title">会员列表</span>
      </el-menu-item>
      <el-submenu index="3" class="menuItem">
        <template slot="title">
          <i class="el-icon-shopping-bag-1"></i>
          <span>商品</span>
        </template>
        <el-menu-item-group>
          <el-menu-item class="menuItemGrop" index="1-1">●&nbsp;&nbsp;<router-link to="/product">商品列表</router-link></el-menu-item>
          <el-menu-item class="menuItemGrop" index="1-2">●&nbsp;&nbsp;添加商品</el-menu-item>
          <el-menu-item class="menuItemGrop" index="1-3">●&nbsp;&nbsp;商品分类</el-menu-item>
          <el-menu-item class="menuItemGrop" index="1-4">●&nbsp;&nbsp;商品类型</el-menu-item>
          <el-menu-item class="menuItemGrop" index="1-5">●&nbsp;&nbsp;品类管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="4" class="menuItem">
        <i class="el-icon-document"></i>
        <span slot="title">订单</span>
      </el-menu-item>
      <el-menu-item index="5" class="menuItem">
        <i class="el-icon-orange"></i>
        <span slot="title">营销</span>
      </el-menu-item>
      <el-menu-item index="6" class="menuItem">
        <i class="el-icon-setting"></i>
        <span slot="title">权限</span>
      </el-menu-item>
      <el-button v-show="isCollapse" @click="openLeft" type="primary" icon="el-icon-edit" circle></el-button>
        <el-button v-show="!isCollapse" @click="closeLeft" type="success" icon="el-icon-check" circle></el-button>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "LeftMenu",
  components: {},
  data() {
    return {
      isCollapse: false
    };
  },
  methods: {
    openLeft() {
      this.isCollapse = false;
    },
    closeLeft() {
      this.isCollapse = true;
    }
  }
};
</script>

<style scoped>
.logoImgOpen {
  width: 200px;
  height: 120px;
  line-height: 120px;
}

.logoImgClose {
  width: 65px;
  height: 120px;
  line-height: 120px;
}

.logoImgBig {
  width: 60px;
  height: 60px;
  vertical-align: middle;
  -webkit-user-drag: none;
}

.logoImgSmall {
  width: 40px;
  height: 40px;
  vertical-align: middle;
  -webkit-user-drag: none;
}

.menuItem {
  text-align: left;
}

.menuItemGrop {
  font-size: 13px;
}

</style>